<template>
<h2>deom07-for01</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-for</div>
    <div  class="zhtt-demo-card-body">
      <ul>
        <li v-for="item in items">{{item.message}}</li>
      </ul>
    </div>
    <div class="zhtt-demo-card-footer">
      v-for="item in items"<br/>
      避免 v-if 和 v-for 一起使用
    </div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-for索引</div>
    <div  class="zhtt-demo-card-body">
      items：{{items}}
      <ul>
        <li v-for="(item, index) in items">{{index+1}}、{{item.message}}</li>
      </ul>
    </div>
    <div class="zhtt-demo-card-footer">
      v-for="(item, index) in items"
    </div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-for遍历对象，获取对象的key、value</div>
    <div  class="zhtt-demo-card-body">
      myObject：{{myObject}}
      <ul>
        <li v-for="(value, key, index) in myObject">({{index}})、{{key}}：{{value}}</li>
      </ul>
    </div>
    <div class="zhtt-demo-card-footer">
      v-for="(value, key, index) in myObject"<br/>
      后两个参数可不传，如：v-for="value in myObject"
    </div>
  </div>
</template>

<script>
export default {
  name: "deom07-for01",
  data(){
    return {
      myObject: {
        'title': 'How to do lists in Vue',
        'author': 'Jane Doe',
        'publishedAt': '2016-04-10'
      },
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  },
  methods:{

  }
}
</script>

<style scoped></style>